<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>hello thymeleaf !</title>
    <script src="jquery.min.js"></script>
    <script th:inline="javascript">
        var curPage=[[${pageInfo.curPage}]];
        function find() {
            var keyword=$("#keywords").val();
            console.log(keyword);
            console.log(curPage);
            location.href="/list?page="+curPage+"&keywords="+keyword;

        }

        //两个函数的绑定
        var i=0;
        //全选
        function change(){
            console.log("click!");
            if(i==0){
                //把所有复选框选中
                $("input[name='remove']").prop("checked", true);
                i=1;
            }else{
                $("input[name='remove']").prop("checked", false);
                i=0;
            }
        }
        
        function delteAll() {
            //TODO
           // $('input:checkbox:checked')
            var valList=new Array();
            $.each($("input[name='remove']:checked"),function(){
                valList.push($(this).val())
            });
            if(valList.length<1){
                return ;
            }
           var ids= valList.join(",");
            console.log(ids);
            $.ajax({
                type:"post",
                url:"/delete",
                data:{ids:valList.join(",")},
                success:function (result) {
                    console.log("获取result结果："+result);
                }
            });
        }
    </script>
</head>
<body>
        <input type="button" value="查询" onclick="find()"/><input type="text" id="keywords" th:value="${pageInfo.keywords}" name="keywords">
        <br>
        <a href="/add">添加</a><a href="#" onclick="delteAll()">删除</a>
        <table border="">
            <thead>
                <tr><th><input type="checkbox" id="selectAll" onclick="change()"></th><th>用户ID</th><th>姓名</th><th>年龄</th><th>操作</th></tr>
            </thead>
            <tbody>
                <tr th:each="user:${users}">
                    <td><input type="checkbox" th:value="${user.id}" name="remove"></td>
                    <td th:text="${user.id}"></td>
                    <td th:text="${user.name}"></td>
                    <td th:text="${user.age}"></td>
                    <td><a th:href="@{'/update?id='+${user.id}}">更新</a></td>
                </tr>
            </tbody>
        </table>
        <a th:href="'/list?page='+${pageInfo.prePage}">下一页</a>
        <a th:href="'/list?page='+${pageInfo.nextPage}">上一页</a>
</body>
</html>